﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>index</title>

    <link rel="shortcut icon" href="./images/favicon.jpg"/>
    <!-- Bootstrap -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!--自己的css文件-->
    <link rel="stylesheet" href="./css/index.css"/>
    <link rel="stylesheet" href="./css/animate.css"/>
    <link rel="stylesheet" href="./css/style.css"/>
    <link rel="stylesheet" href="./css/index2.css"/>

    <link rel="stylesheet" href="./css/jquery.flipster.css">
    <link rel="stylesheet" href="./css/flipsternavtabs.css">

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IEslPjS389ZTQTSPMSmcSFAZod2xBnHh"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="./js/html5shiv.min.js"></script>
    <script src="./js/respond.js"></script>
    <![endif]-->

    <style>

        .container {
            position: relative;
        }

        #mask {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
            background-color: rgba(0,0,0,0.7);
            margin-top: -15%;
            margin-left: -25%;
            display: none;
            overflow: hidden;
            color: #FFFFFF;
        }

        #mask img{
            width: 100%;


        }
        .banner .carousel-caption a{
            color: #97262A;
            font-size: 36px;
            font-weight: 800;
        }

        #motto{
            font-size: 20px;
        }
    </style>
</head>
<body>
<!--------------------顶部导航开始--------------------->
<nav class="navbar navbar-default myNav home">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand basicInfo" href="index2.html">
                <img src="images/mytouxiang.png" alt=""/>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav basicShow">
                <li class="basic current"><a href="#">首页</a></li>
                <li><a href="./showInfo.html">个人简历</a></li>
                <li><a href="#">我的生活</a></li>
                <li><a href="./lyb.html">留言板</a></li>
                <li><a href="#">我爱美食</a></li>
                <li><a href="#">我爱旅行</a></li>
                <!--<li><a href="#">我的关注</a>-->
                <li class="dropdown" id="myCare">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">我的关注
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="subHtml/movies.html">电影</a></li>
                        <li id="ITname">
                            <a href="http://www.hubwiz.com/" target="_blank">IT</a>
                        </li>
                        <li><a href="#">音乐</a></li>
                    </ul>
                </li>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="./login.html" class="login">登录</a></li>
                <li><a href="javascript:;" class="logout">退出</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
</nav>

<!--------------------顶部导航结束--------------------->

<!----------------banner开始------------------->
<div id="banner" class="banner">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            <li data-target="#carousel-example-generic" data-slide-to="5"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/psb9.jpg" alt="...">

                <div class="carousel-caption">
                    <a href="#">熊猫基地</a>
                </div>
            </div>
            <div class="item">
                <img src="images/kuanzhai1.jpg" alt="...">

                <div class="carousel-caption">
                    <a href="#">宽窄巷子</a>
                </div>
            </div>
            <div class="item">
                <img src="images/shenghuo8.jpg" alt="...">

                <div class="carousel-caption">
                    <a href="#">生活景色</a>
                </div>
            </div>
            <div class="item">
                <img src="images/tiantan11.jpg" alt="...">

                <div class="carousel-caption">
                    <a href="#">北京天坛</a>
                </div>
            </div>
            <div class="item">
                <img src="images/gqwf10.jpg" alt="...">

                <div class="carousel-caption">
                    <a href="#">恭亲王府</a>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<!----------------banner结束----------------->


<!--welcome-starts-->
<div class="welcome">
    <div class="container">
        <div class="welcome-top">
            <h1>欢迎来到我的主页</h1>
        </div>

        <div class="welcome-bottom">
            <div class="col-md-6 welcome-left">
                <h3>近日天气</h3>
                <br/>
                <select id="selectCity">
                    <option value="bj">北京</option>
                    <option value="tj" selected>天津</option>
                </select>
                <br/>

                <div class="welcome-one ">

                </div>

                <table class="table">
                    <script type="text/template" id="tpl">
                        <% for(var i=0; i< items.length; i++) { %>
                        <tr>
                            <td><%= items[i].date %></td>
                            <td>
                                <img src="<%= items[i].dayPictureUrl %>" alt="">
                            </td>
                            <td>
                                <img src="<%= items[i].nightPictureUrl %>" alt="">
                            </td>
                            <td><%= items[i].temperature %></td>
                            <td><%= items[i].weather %></td>
                            <td><%= items[i].wind %></td>
                        </tr>
                        <% } %>
                    </script>
                </table>
            </div>
            <div class="col-md-6 welcome-left">
                <h3>我的位置</h3>

                <div class="welcome-one" id="panorama">
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!--welcome-ends-->
<!--offer-starts-->
<div class="offer">
    <div class="container">
        <div class="offer-top heading">
            <h2>美食欣赏</h2>
        </div>
        <div class="offer-bottom">
            <div class="col-md-3 offer-left">
                <a href="single.html"><img src="images/meishi1.jpg" alt=""/>
                    <h6>$29</h6></a>
                <h4><a href="single.html">素丸子</a></h4>

                <p>Maecenas interdum augue eget elit interdum, vitae elementum diam molestie. Nulla facilisi.</p>

                <div class="o-btn">
                    <a href="single.html">Read More</a>
                </div>
            </div>
            <div class="col-md-3 offer-left">
                <a href="#"><img src="images/meishi2.jpg" alt=""/>
                    <h6>$70</h6></a>
                <h4><a href="single.html">小龙虾</a></h4>

                <p>Maecenas interdum augue eget elit interdum, vitae elementum diam molestie. Nulla facilisi.</p>

                <div class="o-btn">
                    <a href="single.html">Read More</a>
                </div>
            </div>
            <div class="col-md-3 offer-left">
                <a href="#"><img src="images/meishi3.jpg" alt=""/>
                    <h6>$46</h6></a>
                <h4><a href="single.html">南瓜粥</a></h4>

                <p>Maecenas interdum augue eget elit interdum, vitae elementum diam molestie. Nulla facilisi.</p>

                <div class="o-btn">
                    <a href="single.html">Read More</a>
                </div>
            </div>
            <div class="col-md-3 offer-left">
                <a href="#"><img src="images/meishi5.jpg" alt=""/>
                    <h6>$80</h6></a>
                <h4><a href="single.html">蛋糕</a></h4>

                <p>Maecenas interdum augue eget elit interdum, vitae elementum diam molestie. Nulla facilisi.</p>

                <div class="o-btn">
                    <a href="single.html">Read More</a>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>

        <div id="mask">点击关闭我
            <img src="" alt=""/>
        </div>
    </div>
</div>
<!--offer-ends-->
<!--nature-starts-->
<div class="nature" id="nature">

    <div class="container">
        <div class="htmleaf-container">
            <div class="htmleaf-content bgcolor-3">
                <div id="Main-Content">
                    <div class="Container">
                        <!-- Flipster List -->
                        <div class="flipster">
                            <ul class="flip-items">
                                <li id="Coverflow-1" title="Cricket" data-flip-category="Fun Sports">
                                    <img src="./images/dianying1.jpg">
                                </li>
                                <li id="Coverflow-2" title="Surfing" data-flip-category="Fun Sports">
                                    <img src="./images/dianying2.jpg">
                                </li>
                                <li id="Coverflow-3" title="Baseball" data-flip-category="Boring Sports">
                                    <img src="./images/dianying3.jpg">
                                </li>
                                <li id="Coverflow-4" title="Running" data-flip-category="Boring Sports">
                                    <img src="./images/dianying4.jpg">
                                </li>
                                <li id="Coverflow-5" title="Air Kicking" data-flip-category="These are Sports?">
                                    <img src="./images/dianying5.jpeg">
                                </li>
                                <li id="Coverflow-6" title="Air Kicking" data-flip-category="These are Sports?">
                                    <img src="./images/dianying6.jpg">
                                </li>
                                <li id="Coverflow-7" title="Air Kicking" data-flip-category="These are Sports?">
                                    <img src="./images/dianying7.jpg">
                                </li>
                                <li id="Coverflow-8" title="Air Kicking" data-flip-category="These are Sports?">
                                    <img src="./images/dianying8.jpg">
                                </li>

                            </ul>
                        </div>
                        <!-- End Flipster List -->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--nature-ends-->
<!--field-starts-->
<div class="fields">
    <div class="container">
        <div class="fields-top">
            <div class="col-md-4 fields-left">
                <span class="home"></span>
                <h4><a href="#banner">My Home</a></h4>

                <p>Pellentesque sed sem bibendum, rutrum ipsum vitae, facilisis turpis. Mauris vitae metus gravida,
                    hendrerit erat ac, facilisis ligula.</p>
            </div>
            <div class="col-md-4 fields-left">
                <span class="men"></span>
                <h4><a href="./lyb.html">Message board</a></h4>

                <p>Pellentesque sed sem bibendum, rutrum ipsum vitae, facilisis turpis. Mauris vitae metus gravida,
                    hendrerit erat ac, facilisis ligula.</p>
            </div>
            <div class="col-md-4 fields-left">
                <span class="pen"></span>
                <h4><a href="./showInfo.html">About Me</a></h4>

                <p>Pellentesque sed sem bibendum, rutrum ipsum vitae, facilisis turpis. Mauris vitae metus gravida,
                    hendrerit erat ac, facilisis ligula.</p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!--field-end-->
<!--footer-starts-->
<div class="footer">
    <div class="container">
        <div class="footer-top">
            <div class="col-md-4 footer-left">
                <p id="motto">生命因为追求而精彩，追求因指引而成功，人之所以是能，那就是相信能! </p>
            </div>
            <div class="col-md-4 footer-left">
                <h3>相关链接</h3>
                <ul>
                    <li><a href="https://www.facebook.com/" target="_blank"><span class="fb"> </span></a></li>
                    <li><a href="https://twit.tv/" target="_blank"><span class="twit"> </span></a></li>
                    <li><a href="http://google.114.org/" target="_blank"><span class="google"> </span></a></li>
                    <li><a href="http://weibo.com/" target="_blank"><span class="pin"> </span></a></li>
                </ul>
            </div>
            <div class="col-md-4 footer-left">
                <h3>Address</h3>

                <p>My Name is Yin Qing,
                    <span>Now living in Beijing</span>
                </p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <a href="#banner" id="toTop" class="scroll" style="display: block;"></a>

</div>
<!--footer-ends-->


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.12.2.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>
<script src="./js/wow.js"></script>
<script src="./js/index2.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script src="./js/template-native.js"></script>
<script>

    $(function () {

        //页面加载完以后调用获取我的地理位置方法
        getMyPosition();
        //获取地理位置
        function getMyPosition() {
            var panorama = new BMap.Panorama('panorama');
            panorama.setPosition(new BMap.Point(116.316169, 40.005567)); //根据经纬度坐标展示全景图 北京

            panorama.setPov({heading: -40, pitch: 6});

            panorama.addEventListener('position_changed', function (e) { //全景图位置改变后，普通地图中心点也随之改变
                var pos = panorama.getPosition();
                map.setCenter(new BMap.Point(pos.lng, pos.lat));
                marker.setPosition(pos);
            });
        }

        //设置轮播图
        $('.carousel').carousel({
            //每隔1.5秒播放一张
            interval: 1500
        })


        //页面加载完以后获取默认选择的城市，并调用显示当地天气的函数
        //执行ajax请求之前的提示
        var city = $("select option:selected").text();
        getWeather(city);

        //当用户选中了其他城市以后，重新调用天气函数，修改页面数据
        $("select").on("change", function () {
            var city = $("select option:selected").text();
            //执行ajax请求之前的提示
            $('.table').html('正在加载数据.....');

            $('.table').css('text-align', 'center');
            getWeather(city);
        })

        //获取天气的方法
        function getWeather(city) {
            // 跨域访问
            $.ajax({
                type: 'get',
                url: 'http://api.map.baidu.com/telematics/v3/weather',
                data: {location: city, output: 'json', ak: '0A5bc3c4fb543c8f9bc54b77bc155724'},
                dataType: 'jsonp',
                success: function (data) {

                    var info = {
                        items: data['results'][0]['weather_data']
                    }

                    // 调用模板引擎
                    var html = template('tpl', info);
                    $('.table').html('');
                    $('.table').append(html);
                    var isIE = window.navigator.userAgent.indexOf("IE");
                    if(isIE !== -1){
                        $("table td").css({
                            "border-width":"2px",
                            "border-style":"solid",
                            "border-color":"#cccccc"
                        });
                    }
                },
                error: function () {
                    var info = "亲，获取数据失败了！";

                    // 调用模板引擎
                    var html = template('tpl', info);
                    $('.table').html('');
                    $('.table').append(html);
                    $('.table').css('height', '100px');
                    $('.table').css('line-height', '100px');
                    $('.table').css('text-align', 'center');
                    $('.table').css('font-size', '20px');
                }
            });
        }

    })


    //给欣赏美食模块注册事件
    $(".offer img").on("mouseover", function () {
        var _this = this;
        $("#mask").css("display", "block");
        var width = $(".offer .offer-bottom .col-md-3").width();
        $("#mask").css("width",width*2.2 + "px");
        $("#mask img")[0].src = _this.src;
    });

    $("#mask").on("click",function(){
        $(this).css("display","none");
    })



</script>

<script src="./js/jquery.flipster.js"></script>
<script>
    <!--

    $(function () {

        $(".flipster").flipster({
            itemContainer: 'ul', // Container for the flippin' items.
            itemSelector: 'li', // Selector for children of itemContainer to flip
            style: 'carousel', // Switch between 'coverflow' or 'carousel' display styles
            start: 0, // Starting item. Set to 0 to start at the first, 'center' to start in the middle or the index of the item you want to start with.

            enableKeyboard: true, // Enable left/right arrow navigation
            enableMousewheel: true, // Enable scrollwheel navigation (up = left, down = right)
            enableTouch: true, // Enable swipe navigation for touch devices

            enableNav: true, // If true, flipster will insert an unordered list of the slides
            enableNavButtons: true, // If true, flipster will insert Previous / Next buttons

            onItemSwitch: function () {
            }, // Callback function when items are switches
        });

    });

    -->
</script>
</body>
</html>